<template>
	<!-- 修改登录密码 -->
	<view>
		<view class="input">
			<text class="phone">{{phone}}</text><text class="ma" @click="getma">{{ma}}</text>
		</view>
		<input type="number" class="input" placeholder="请输入验证码" v-model="smsVerifyCode" >
		<input type="password" class="input" placeholder="请输入6位登录密码" v-model="password" :maxlength="6">
		<input type="password" class="input" placeholder="确认密码" v-model="pwsd" :maxlength="6">
		<view class="bbb">
			<view class="jd" @click="submit">
				确认修改
			</view>
		</view>
	</view>
</template>

<script>
	import {getsms} from"../../api/login.js"
	import {setpassword} from"../../api/user.js"
	export default{
		data(){
			return{
				ma:"获取验证码",
				password:"",
				smsVerifyCode:"",
				phone:"",
				pwsd:""
			}
		},
		onLoad() {
			this.phone=uni.getStorageSync("user").phone
		},
		methods:{
			async submit(){
				if(this.smsVerifyCode.trim()==""){
					this.msg("验证码未填写", "none")
					return
				}
				if(this.password.trim()==""){
					this.msg("密码未填写", "none")
					return
				}
				console.log(this.pwsd.trim())
				if(this.pwsd.trim()==""){
					this.msg("确认密码未填写","none")
					return
				}
				if(this.pwsd.trim()!=this.password.trim()){
					this.msg("2次输入的密码不一致", "none")
					return
				}
				let res=await this.post(setpassword,{password:this.password,smsVerifyCode:this.smsVerifyCode,phone:this.phone})
				this.msg("修改成功")
				setTimeout(()=>{
					uni.switchTab({
						url:"/pages/user/user"
					})
				},1500)
			},
			// 获取验证码
			async getma() {
				if (this.ma == "获取验证码") {
					if (this.$u.test.mobile(this.phone)) {
						let res=await this.get(getsms,{mobile:this.phone})
						// 在此发送异步
						this.msg("验证码发送成功")
						if (this.ma == "获取验证码") {
							let time = 59;
							let timer = setInterval(() => {
								if (time === 0) {
									clearInterval(timer);
									this.ma = "获取验证码"
								} else {
									this.ma = time + "s后获取";
									time--
								}
							}, 1000);
						}
					} else {
						this.msg("手机号未填写或格式不对", "none")
					}
				} else {
					this.msg("稍后重试", "none")
				}
			},
		}
	}
</script>

<style>
	.phone{
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
		opacity: 1;
	}
	.ma{
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #F09238;
		opacity: 1;
	}
	.bbb{
		display: flex;
		justify-content: center;
		margin-top: 200rpx;
	}
	.input{
		height: 100rpx;
		padding-left: 40rpx;
		border-bottom: 1px #ECECEC solid;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-right: 30rpx;
	}
	.box{
		display: flex;
		align-items: center;
		margin-top: 40rpx;
		width: 540rpx;
		justify-content: space-between;
	}
	.jd{
		width: 240rpx;
		height: 70rpx;
		background: linear-gradient(180deg, #F09238 0%, #EC5F2A 100%);
		opacity: 1;
		border-radius: 12rpx;
		color: #FFFFFF ;
		text-align: center;
		line-height: 70rpx;
	}
	.bjd{
		width: 240rpx;
		height: 70rpx;
		border: 1px solid #F09238;
		opacity: 1;
		border-radius: 12rpx;
		color: #F09238 ;
		text-align: center;
		line-height: 70rpx;
	}
	.t{
		height: 40rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 40rpx;
		color: #333333;
		opacity: 1;
	}
	.type_1{
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-top:100rpx ;
	}
</style>
